<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus (keyup.enter)="addTodo($event)">
  </header>
  <ng-template [ngIf]="todos.length">
    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" (click)="toggleAllChange($event)" [checked]="toggleAll">
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- 
      li 是每一个待办事项
      每个待办事项有三种状态：
        正常状态 没有样式
        完成状态 completed
        编辑状态 editing
     -->
        <li *ngFor="let todo of filterTodos; let i = index" [ngClass]="{
          completed:todo.done,
          editing:currentEditing === todo 
        }">
          <div class="view">
            <input class="toggle" type="checkbox" [(ngModel)]="todo.done" [checked]="todo.done">
            <label (dblclick)="currentEditing = todo">{{todo.title}}</label>
            <button class="destroy" (click)="deleteTodo(i)"></button>
          </div>
          <input class="edit" [value]="todo.title" (keyup.enter)="saveEdit(todo,$event)" (blur)="saveEdit(todo,$event)"
            (keyup)="cancelEdit($event)" (focus)="true">
        </li>
      </ul>
    </section>

    <footer class="footer">

      <span class="todo-count"><strong>{{remainUndoneCount}}</strong> item left</span>

      <ul class="filters">
        <li>
          <a [ngClass]="{selected:visibility === 'all'}" href="#/">All</a>
        </li>
        <li>
          <a [ngClass]="{selected:visibility === 'active'}" href="#/active">Active</a>
        </li>
        <li>
          <a [ngClass]="{selected:visibility === 'completed'}" href="#/completed">Completed</a>
        </li>
      </ul>

      <button class="clear-completed" (click)="cleanCompleted()">Clear completed</button>
    </footer>
  </ng-template>

</section>
<footer class="info">
  <p>Double-click to edit a todo</p>
  <!-- Remove the below line ↓ -->
  <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
  <!-- Change this out with your name and url ↓ -->
  <p>Created by <a href="http://todomvc.com">you</a></p>
  <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>

<script src="../../node_modules/todomvc-common/base.js"></script>